<template>
  <el-date-picker
    :ref="refName"
    v-model="date"
    :type="type"
    :width="width"
    placeholder="请选择"
    :editable="false"
    :clearable="false"
    @change="setDate"
  />
</template>

<script>
export default {
  props: {
    refName: {
      type: String,
      default: 'ref'
    },
    type: {
      type: String,
      default: 'month'
    },
    width: {
      type: String,
      default: '128px'
    }
  },
  data() {
    return {
      date: new Date()
    }
  },
  mounted() {
    const keyNode = this.$refs[this.refName].$el
    keyNode.style.width = this.width
    const node = keyNode.children[0]
    node.style.width = this.width
    const iNode = document.createElement('i')
    iNode.setAttribute('class', 'el-icon-caret-bottom')
    keyNode.appendChild(iNode)
    iNode.style.position = 'absolute'
    iNode.style.top = '6px'
    iNode.style.right = '8px'
    iNode.style.color = '#2087D0'
  },
  methods: {
    setDate(date) {
      this.$emit('getMonth', {
        ref: this.refName,
        date: this.formatDate(date)
      })
    },
    formatDate(date) {
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      if (this.type === 'month') {
        return year.toString() + month.toString()
      } else {
        return year.toString() + month.toString() + day.toString()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.el-input {
  &::v-deep .el-input__inner {
    padding-left: 16px;
    padding-right: 0;
    height: 28px;
    background: #f4fbff;
    border-radius: 14px;
    color: #2087d0;
  }

  &::v-deep .el-input__prefix {
    display: none;
  }

  .el-range-input .el-input__icon {
    right: 30px !important;
  }
}
</style>
